<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--引入本地的css样式-->
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索框-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 250px">
                    <label class="layui-form-label">客户姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="customer_name" id="customer_name" required placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline" style="width: 250px;margin-left: 50px">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="mobile_phone" id="mobile_phone" required placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layuiadmin-btn-admin" id="btn_search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>


        <div class="layui-card-body">
            <!--头部工具栏 id="toolbarDemo" lay-event="事件名"-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <!-- lay-event 给元素绑定事件名 -->
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="batchdel">
                        批量删除
                    </button>
                    <button class="layui-btn layuiadmin-btn-admin" lay-event="add_customer">
                        添加
                    </button>
                </div>
            </script>

            <!--数据表格-->
            <table class="layui-hide" id="LAY-customer-back-manage" lay-filter="LAY-customer-back-manage"></table>

            <script type="text/html" id="sexTpl">
                {{#  if(d.sex == 1){ }}
                <span>男</span>
                {{#  } else if(d.sex == 2){ }}
                <span>女</span>
                {{#  } }}
            </script>
            <!-- laytpl模板引擎 数据库状态字段
            1转换成正常显示到页面；2转换成冻结显示到页面 3转换成删除显示到页面 -->
            <script type="text/html" id="statusTpl">
                {{#  if(d.status == 1){ }}
                <span>启用</span>
                {{#  } else if(d.status == 2){ }}
                <span>禁用</span>
                {{#  } else if(d.status == 3){ }}
                <span>流失</span>
                {{#  } }}
            </script>


<!--            <script type="text/html" id="buttonTpl">-->
<!--                {{#  if(d.check == true){ }}-->
<!--                <button class="layui-btn layui-btn-xs">已审核</button>-->
<!--                {{#  } else { }}-->
<!--                <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>-->
<!--                {{#  } }}-->
<!--            </script>-->

<!--            <script type="text/html" id="table-useradmin-admin">-->
<!--                <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
<!--                {{#  if(d.role == '超级管理员'){ }}-->
<!--                <a class="layui-btn  layui-btn-xs"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--                {{#  } else { }}-->
<!--                <a class="layui-btn  layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>-->
<!--                {{#  } }}-->
<!--            </script>-->

            <!--侧边工具栏 id=barDemo lay-event="事件名"-->
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>

<script src="../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../static/layui/layui.js"></script>
<!--js-->
<script type="text/javascript">
    layui.config({
        base: '../../static/layui/layuiadmin/' //静态资源所在路径js
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>

<script type="text/javascript">
    layui.use(['table','form'],function (){
        var table = layui.table;
        var form = layui.form;
        //表格方法渲染：把数据查询显示在数据表格中
        table.render({
            elem:'#LAY-customer-back-manage',//绑定在哪一个table表中,#id值
            url:'/customer/customer',//绑定servlet路径
            title:'客户资源表',//标题
            toolbar:'#toolbarDemo',//头部工具栏
            cols:[[
                //设置复选框列
                {type:'checkbox',fixed:'left'},
                //设置表头
                {field:'id',title:'ID',fixed:'left',unresize:true,sort:true,width:80},
                {field:'customer_name',title:'客户姓名'},
                {field:'sex',title:'性别',templet:'#sexTpl'},
                {field:'type',title:'客户类型'},
                {field:'status',title:'状态',templet:'#statusTpl'},
                {field:'entry_time',title:'录入时间'},
                {field:'sale_admin',title:'销售人'},
                //侧边工具栏/行工具
                {title:'操作',fixed:'right',toolbar:'#barDemo',width:180}
            ]],
            page:true,
            limits:[5,10,15,20]
        })

        //按条件搜索,绑定单击事件
        $("#btn_search").click(function (){
            //获取输入框的客户名
            var customer_name = $("#customer_name").val();
            var mobile_phone = $("#mobile_phone").val();
            //表格重载
            table.reload('LAY-customer-back-manage', {
                url:'/customer/search',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    customer_name:customer_name,
                    mobile_phone:mobile_phone
                }
            });
        })

        //监听行工具事件/侧边工具栏
        table.on('tool(LAY-customer-back-manage)',function (obj){
            var data = obj.data;//选中的当前行数据
            //获取事件名，根据不同的事件名做出不同的处理
            if(obj.event === 'del'){//删除功能
                layer.confirm('您确定要删除吗?',function (index){
                    //发起Ajax请求
                    $.ajax({
                        url:"/customer/del",
                        type: "post",
                        data:{id:data.id},
                        dataType:"json",
                        success:function (res){
                            layer.alert(res.msg);//弹出提示信息
                            obj.del();//页面真删
                            layer.close(index);//关闭弹出层
                        }
                    })
                })
            }else if(obj.event === 'edit'){//编辑功能
                layer.open({
                    type:2,//iframe层
                    title:'编辑客户资源',
                    content:'edit.html',//展示编辑页面
                    area:['700px','550px'],
                    maxmin:true,
                    btn:['确定','取消'],
                    yes:function (index, layero){
                        //应该把edit.html页面表单的数据提交给服务器
                        //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                        var body = layer.getChildFrame('body', index);
                        //获取edit.html页面中所有表单的数据
                        var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                        //发起Ajax请求
                        $.ajax({
                            url:"/customer/update",
                            type:"post",
                            data:submitData,
                            dataType: "json",
                            success:function (res){
                                if(res.code==200){
                                    layer.msg(res.msg,{
                                        offset:'15px',
                                        icon:1,
                                        time:1000
                                    },function (){
                                        //刷新
                                        window.location.reload();
                                    })
                                }
                                if(res.code==500){
                                    layer.msg(res.msg,{
                                        offset:'15px',
                                        icon:1,
                                        time:1000
                                    },function (){
                                        //刷新
                                        window.location.reload();
                                    })
                                }
                                layer.close(index);//关闭弹层
                            }
                        })
                    },
                    success: function(layero, index){//子页面edit.html页面数据回显
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //input控件的输入框/隐藏框
                        body.find("input[name=id]").val(data.id);
                        body.find("input[name=customer_code]").val(data.customer_code);
                        body.find("input[name=sale_admin]").val(data.sale_admin);
                        body.find("input[name=entry_time]").val(data.entry_time);
                        body.find("input[name=customer_name]").val(data.customer_name);
                        body.find("input[value="+data.sex+"]").attr("checked","checked")
                        body.find("input[name=birth]").val(data.birth);
                        //select下拉框
                        body.find("option[value="+data.type+"]").attr("selected",true)
                        //select下拉框
                        body.find("option[value="+data.status+"]").attr("selected",true)
                        body.find("input[name=mobile_phone]").val(data.mobile_phone);
                        body.find("input[name=office_phone]").val(data.office_phone);
                        body.find("input[name=email]").val(data.email);
                        body.find("input[name=home_phone]").val(data.home_phone);
                        body.find("textarea[name=address]").val(data.address);
                        body.find("textarea[name=remark]").val(data.remark);
                        //刷新渲染  重要！！！！
                        iframeWin.layui.form.render();
                    }
                })
            }else if(obj.event === 'show'){
                layer.open({
                    type:2,//iframe层
                    title:'查看客户资源',
                    content:'show.html',//展示编辑页面
                    area:['700px','550px'],
                    maxmin:true,
                    success: function(layero, index){//子页面show.html页面数据回显
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //input控件的输入框/隐藏框
                        body.find("input[name=id]").val(data.id);
                        body.find("input[name=customer_code]").val(data.customer_code);
                        body.find("input[name=sale_admin]").val(data.sale_admin);
                        body.find("input[name=entry_time]").val(data.entry_time);
                        body.find("input[name=customer_name]").val(data.customer_name);
                        body.find("input[value="+data.sex+"]").attr("checked","checked")
                        body.find("input[name=birth]").val(data.birth);
                        //select下拉框
                        body.find("option[value="+data.type+"]").attr("selected",true)
                        //select下拉框
                        body.find("option[value="+data.status+"]").attr("selected",true)
                        body.find("input[name=mobile_phone]").val(data.mobile_phone);
                        body.find("input[name=office_phone]").val(data.office_phone);
                        body.find("input[name=email]").val(data.email);
                        body.find("input[name=home_phone]").val(data.home_phone);
                        body.find("textarea[name=address]").val(data.address);
                        body.find("textarea[name=remark]").val(data.remark);
                        //刷新渲染  重要！！！！
                        iframeWin.layui.form.render();
                    }
                })
            }
        })

        // 监听头部工具栏
        table.on('toolbar(LAY-customer-back-manage)',function (obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event){
            case 'batchdel':
                var data = checkStatus.data;
                if(data.length<1){
                    layer.msg('您还未选中删除的数据')
                }else{
                    //删除：提示确认框，发起Ajax请求
                    layer.confirm('确定要删除选中行数据吗?',function (index){
                        var ids = new Array();
                        $.each(data,function (index,item){
                            //循环遍历选中的数据，只要数据的id，把id塞入到数组中
                            ids.push(item.id);
                        })
                        //发起Ajax请求
                        $.ajax({
                            url:"/customer/batchdel",
                            type:"post",
                            data:{ids:ids},
                            traditional: true,//数组进行传统的序列化操作
                            dataType:"json",
                            success:function (res){
                                layer.msg(res.msg,{
                                    offset:'15px',
                                    icon:1,
                                    time:1500
                                },function (){
                                    //刷新
                                    window.location.reload();
                                })
                            }
                        })
                    })
                }
                break;
                case 'add_customer':
                layer.open({
                    type:2,//iframe层
                    title:'添加客户信息',
                    content:'add.html',//展示添加页面
                    area:['700px','550px'],
                    maxmin:true,
                    btn:['确定','取消'],
                    yes:function (index, layero){
                        //应该把edit.html页面表单的数据提交给服务器
                        //在当前页面-list.html获取iframe层-edit.html的DOM-form表单
                        var body = layer.getChildFrame('body', index);
                        //获取edit.html页面中所有表单的数据
                        var submitData = body.find("#myform").serialize();//serialize()只能序列化表单中文本
                        //发起Ajax请求
                        $.ajax({
                            url:"/customer/add",
                            type:"post",
                            data:submitData,
                            dataType: "json",
                            success:function (res){
                                if(res.code==200){
                                    layer.msg(res.msg,{
                                        offset:'15px',
                                        icon:1,
                                        time:1000
                                    },function (){
                                        //刷新
                                        window.location.reload();
                                    })
                                }
                                if(res.code==500){
                                    layer.msg(res.msg,{
                                        offset:'15px',
                                        icon:1,
                                        time:1000
                                    },function (){
                                        //刷新
                                        window.location.reload();
                                    })
                                }
                                layer.close(index);//关闭弹层
                            }
                        })
                    }
                })
                break;
            }
        })
    })
</script>
</body>
</html>